{% block sw_side_navigation_item %}
<!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
<a
    v-if="isNative"
    class="sw-tabs-item"
    :class="tabsItemClasses"
    v-bind="$attrs"
    role="tab"
    tabindex="0"
    @click="clickEvent"
>
    {% block sw_tabs_item_slot %}
    <slot></slot>
    {% endblock %}

    <mt-icon
        v-if="hasError"
        v-tooltip="{ message: errorTooltip }"
        class="sw-tabs-item__error-badge"
        name="solid-exclamation-circle"
        size="12px"
    />

    <mt-icon
        v-if="!hasError && hasWarning"
        v-tooltip="{ message: warningTooltip }"
        class="sw-tabs-item__warning-badge"
        name="solid-exclamation-triangle"
        size="12px"
    />
</a>

<component
    :is="disabled ? 'span' : 'router-link'"
    v-else
    ref="sw-tabs-item"
    :class="tabsItemClasses"
    v-bind="$attrs"
    class="sw-tabs-item"
    :to="route"
    role="tab"
    tabindex="0"
    @click="clickEvent"
>
    {% block sw_tabs_item_slot_native %}
    <slot></slot>
    <mt-icon
        v-if="hasError"
        v-tooltip="{ message: errorTooltip }"
        class="sw-tabs-item__error-badge"
        name="solid-exclamation-circle"
        size="12px"
    />
    <mt-icon
        v-if="!hasError && hasWarning"
        v-tooltip="{ message: warningTooltip }"
        class="sw-tabs-item__warning-badge"
        name="solid-exclamation-triangle"
        size="12px"
    />
    {% endblock %}
</component>
{% endblock %}
